<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="tbl"></table>
<script>

    //    1、 "好好学习天天向上" 进行反转
    //
    //    var str = "";
    //    var src = "好好学习天天向上";
    //
    //    for(var i =src.length-1;i>=0;i--){
    //        str+=src.charAt(i);
    //    }
    //
    //    alert(src.split("").reverse().join(""));

    var person = [{
        name: 'zhangsan',
        age: 45,
        sex: '男'
    }, {
        name: 'zhangsan1',
        age: 23,
        sex: '女'
    }, {
        name: 'zhangsan2',
        age: 2,
        sex: '男'
    }, {
        name: 'zhangsan3',
        age: 45,
        sex: '女'
    }, {
        name: 'zhangsan4',
        age: 188,
        sex: '女'
    }, {
        name: 'zhangsan5',
        age: 23,
        sex: '男'
    },];

    var sexs = {'女': 4, '男': 2};
    person.sort(function (a, b) {
        if (a.age == b.age) {
            return sexs[a.sex] - sexs[b.sex];
        }
        return a.age - b.age;
    });

    var shengxiaos = ["牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗","猪","鼠"];

    shengxiaos.reverse();

    var tbl = document.getElementById('tbl');

    tbl.innerHTML = person.map(function (item) {
        var srb = item.age >= 45 && item.sex == '男' ? "background:red;" : "";

        return `<tr style="${srb}">
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.sex}</td>
            <td>${getShengXiao(item.age)}</td>
        </tr>`;
    }).join("");




    function getShengXiao(age) {
        var date = new Date();
        var aa = date.getFullYear() ;
        return shengxiaos[(age+(2020-aa))%12];
    }
//    console.log(shengxiaos[(20+(2020-2018))%12]);
</script>
</body>
</html>